<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<div th:replace="~{fragment/headFragment :: head}"></div>

<body class="cbp-spmenu-push">
<div class="main-content">

	<div th:replace="~{fragment/left-border :: left}"></div>

	<div th:replace="~{fragment/header :: header}"></div>

		<!-- main content start-->
		<div id="page-wrapper">
			<div class="main-page signup-page">
				<h3 class="title1">通用设置</h3>

				<div class="sign-up-row widget-shadow">

					<p style="font-size: 13px;margin: 10px 17px 4px;">点击图片上传头像，建议上传图片尺寸为128px*128px</p>

					<div class="head_img" style="margin: 0 auto">
						<!--  一定要给img标签加上宽高，不然图片会按原大小显示  -->
	    				<a id="fileSelect" > <img id="avatar_img" th:src="@{${session.cs.getHeadimg()}}" width="128px" height="128px"
												  style="background: #fff; margin: 2em;" class="img-circle" title="点击选择头像"/></a>

						<input type="file" id="fileElem" multiple accept="image/*" style="display: none;"
							   onchange="handleFiles(this.files)"/>

						<a id="commitImg" href="javascript:commitImg();" style="background-color: #6164C1; color: white; margin-left: 23px;" class="btn btn-default btn-flat">上传头像</a>

					</div>

					<script type="text/javascript">
						// 上传头像
						let fileSelect = document.getElementById("fileSelect"),
								fileElem = document.getElementById("fileElem");
						fileSelect.addEventListener("click", function (e) {
							if (fileElem) {
								fileElem.click();
							}
							e.preventDefault(); // prevent navigation to "#"
						}, false);

						function handleFiles(files) {
							var choose_file = files[0];
							// 截取图片名称小数点后的字符串
							var ftype = choose_file.name.substring(choose_file.name.lastIndexOf(".") + 1);
							// 校验格式是否是图片类型
							if (ftype == "jpg" || ftype == "png" || ftype == "jpeg" || ftype == "JPG") {
								// 限制大小，照片大小不能超过1M
								var size = choose_file.size / 1024 / 1024;
								if (size > 1) {
									layer.alert("头像不能大于1M", function (index) {
										layer.close(index);
									});
									return false;
								}
								// 实例化一个阅读器对象
								var reader = new FileReader();
								// 读取文件的路径，没有返回值,结果在reader.result里
								reader.readAsDataURL(choose_file);
								// 读取需要时间，读完后再修改图片路径
								reader.onloadend = function () {
									// 回显
									$("#avatar_img").attr("src", this.result);
								}

							} else {
								layer.alert("头像格式不对，请重新选择！", function (index) {
									layer.close(index);
								});
								return false;
							}
						}

						function commitImg() {
							var formData = new FormData();
							formData.append("file", $("#fileElem")[0].files[0]);
							$.ajax({
								url: "/customerService/headImg",
								type: "POST",
								data: formData,
								processData: false,
								contentType: false,
								success: function (data) {
									if (data === "OK") {
										//layer.msg("上传成功！");
										alert("上传成功！");
										window.location.reload(true);
									}
									else {
										alert("上传失败！");
										window.location.reload(true);
									}
								}
							})
						}
						function commitForm() {
							//alert("设置成功！");
							var formData = new FormData($("#cs")[0]);
							//formData.append("customerService", JSON.stringify({email:email,customerservicephone:customerservicephone,nickname:nickname,realname:realname}));

							$.ajax({
								url: "/customerService/settingUp",
								type: "POST",
								data: formData,
								processData: false,
								contentType: false,
								//dataType:"json",
								success: function (data) {
									if (data === "OK") {
										//layer.msg("上传成功！");
										alert("设置成功！");
										window.location.reload(true);
									}
									else {
										alert("上传失败！");
										window.location.reload(true);
									}
								}
							})
						}
						function reloadHTML() {
							window.location.href = "setting.html";
							alert("设置成功！");
						}
					</script>

					<!--<form action="/customerService/settingUp" method="post"-->
					<form id="cs">
					<h5>Personal Information :</h5>
					<div class="sign-u">
						<div class="sign-up1">
							<h4>邮箱* :</h4>
						</div>
						<div class="sign-up2">
								<input type="text" name="email" required th:value="${session.cs.getEmail()}">
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="sign-u">
						<div class="sign-up1">
							<h4>联系电话* :</h4>
						</div>
						<div class="sign-up2">
								<input type="text" name="customerservicephone" required th:value="${session.cs.getCustomerservicephone()}">
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="sign-u">
						<div class="sign-up1">
							<h4>昵称* :</h4>
						</div>
						<div class="sign-up2">
								<input type="text" name="nickname" required th:value="${session.cs.getNickname()}">
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="sign-u">
						<div class="sign-up1">
							<h4>姓名* :</h4>
						</div>
						<div class="sign-up2">
								<input type="text" name="realname" required th:value="${session.cs.getRealname()}">
						</div>
						<div class="clearfix"> </div>
					</div>
	<!--				<h6>Login Information :</h6>
					<div class="sign-u">
						<div class="sign-up1">
							<h4>原密码 :</h4>
						</div>
						<div class="sign-up2">
								<input type="password" name="passwordPre">
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="sign-u">
						<div class="sign-up1">
							<h4>新密码 :</h4>
						</div>
						<div class="sign-up2">
								<input type="password" name="password" id="pw1">
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="sign-u">
						<div class="sign-up1">
							<h4>确认新密码 :</h4>
						</div>
						<div class="sign-up2">
								<input type="password" id="pw2" onkeyup="validate()">
								<span id="tishi"></span>
						</div>
						<div class="clearfix"> </div>
					</div>
					-->
						<center>
					<div class="sub_home">
							<!--<input type="submit" value="确认" id="submit"
								   onload="javascript:commitForm()">-->
						<!--button onclick="commitForm()">确认</button-->
						<a id="commitForm" href="javascript:commitForm();" style="margin:0 auto; margin-left: 23px; text-align: center; display: inline-block; width:200px; background-color: #6164C1; color: white;" class="btn btn-default btn-flat">确认</a>
						<div class="clearfix"> </div>
					</div>
						</center>
					</form>
				</div>
				<script>
					function validate() {
						var pw1 = document.getElementById("pw1").value;
						var pw2 = document.getElementById("pw2").value;
						if(pw1 == pw2) {
							document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
							document.getElementById("submit").disabled = false;
						}
						else {
							document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
							document.getElementById("submit").disabled = true;
						}
					}
				</script>
			</div>
		</div>

	</div>
	<!-- Classie -->
		<script src="js/classie.js"></script>
		<script>
			var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
				showLeftPush = document.getElementById( 'showLeftPush' ),
				body = document.body;
				
			showLeftPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toright' );
				classie.toggle( menuLeft, 'cbp-spmenu-open' );
				disableOther( 'showLeftPush' );
			};
			
			function disableOther( button ) {
				if( button !== 'showLeftPush' ) {
					classie.toggle( showLeftPush, 'disabled' );
				}
			}
		</script>
	<!--scrolling js-->
	<script src="js/jquery.nicescroll.js"></script>
	<script src="js/scripts.js"></script>
	<!--//scrolling js-->
	<!-- Bootstrap Core JavaScript -->
	<script src="js/bootstrap.js"> </script>
</body>
</html>